<!-- pages/my/index.vue -->
<script setup lang="ts">
import { userInfoApi } from '@/apis/user'
import { useUserStore } from '@/stores/user_store'
import type { UserData } from '@/types/user'
import { onLoad } from '@dcloudio/uni-app'
import { ref } from 'vue'
const store = useUserStore()
// 接收个人信息对象
const userInfo = ref({} as UserData)
onLoad(() => {
    // 获取用户信息
    getUserInfo()
})
const getUserInfo = async () => {
    // 调用接口获取用户信息
    const data = await userInfoApi()
    // 渲染用户数据
    userInfo.value = data
    console.log(data)
}
// 获取用户信息
getUserInfo()
// 退出登录
const loginOut = async () => {
    const re = await uni.showModal({
        title: '温馨提示',
        content: '您确定要退出登录吗?',
        confirmColor: '#2CB5A5',
        success: (re) => {
            if (re.confirm) {
                // 清空token
                store.token = ''
                // 跳转回到登录页
                uni.reLaunch({ url: '/pages/login/login' })
            }
        },
    })
}
</script>
<template>
    <!-- 用于没有用户信息时候不报错 -->
    <scroll-view scroll-y v-if="userInfo.id">
        <view class="my-page">
            <!-- 用户资料（头像&昵称） -->
            <view class="user-profile">
                <image class="user-avatar" :src="userInfo.avatar"></image>
                <view class="user-info">
                    <text class="nickname">{{ userInfo.account }}</text>
                    <text class="iconfont icon-edit"></text>
                </view>
            </view>
            <!-- 用户数据 -->
            <view class="user-data">
                <navigator hover-class="none" url=" ">
                    <text class="data-number">{{ userInfo.collectionNumber }}</text>
                    <text class="data-label">收藏</text>
                </navigator>
                <navigator hover-class="none" url=" ">
                    <text class="data-number">{{ userInfo.likeNumber }}</text>
                    <text class="data-label">关注</text>
                </navigator>
                <navigator hover-class="none" url=" ">
                    <text class="data-number">{{ userInfo.score }}</text>
                    <text class="data-label">积分</text>
                </navigator>
                <navigator hover-class="none" url=" ">
                    <text class="data-number">{{ userInfo.couponNumber }}</text>
                    <text class="data-label">优惠券</text>
                </navigator>
            </view>
            <!-- 问诊医生 -->
            <custom-section v-if="userInfo.consultationInfo.length" :custom-style="{ paddingBottom: '20rpx' }"
                title="问诊中">
                <!-- 默认插槽位置 -->
                <swiper class="uni-swiper" indicator-active-color="#2CB5A5" indicator-color="#EAF8F6" indicator-dots
                    direction="horizontal">
                    <swiper-item v-for="(doctor, index) in userInfo.consultationInfo" key="doctor.id">
                        <view class="doctor-brief">
                            <image class="doctor-avatar" :src="doctor.avatar" />
                            <view class="doctor-info">
                                <view class="meta">
                                    <text class="name">{{ doctor.name }}</text>
                                    <text class="title">{{ doctor.depName | doctor.positionalTitles }}</text>
                                </view>
                                <view class="meta">
                                    <text class="tag">{{ doctor.gradeName }}</text>
                                    <text class="hospital">{{ doctor.hospitalName }}</text>
                                </view>
                            </view>
                            <navigator class="doctor-contcat" hover-class="none" url=" "> 进入咨询 </navigator>
                        </view>
                    </swiper-item>
                </swiper>
            </custom-section>
            <!-- 药品订单 -->
            <custom-section show-arrow title="药品订单">
                <!-- 一种插槽的简写  v-slot:right -->
                <template #right>
                    <navigator hover-class="none" url=" "> 全部订单 </navigator>
                </template>
                <view class="drug-order">
                    <navigator hover-class="none" url=" ">
                        <uni-badge :text="userInfo.orderInfo.finishedNumber" :offset="[3, 3]" absolute="rightTop">
                            <image src="/static/images/order-status-1.png" class="status-icon" />
                        </uni-badge>
                        <text class="status-label">待付款</text>
                    </navigator>
                    <navigator hover-class="none" url=" ">
                        <uni-badge :text="userInfo.orderInfo.paidNumber | 0" :offset="[3, 3]" absolute="rightTop">
                            <image src="/static/images/order-status-2.png" class="status-icon" />
                        </uni-badge>
                        <text class="status-label">待付款</text>
                    </navigator>
                    <navigator hover-class="none" url=" ">
                        <uni-badge :text="userInfo.orderInfo.receivedNumber" :offset="[3, 3]" absolute="rightTop">
                            <image src="/static/images/order-status-3.png" class="status-icon" />
                        </uni-badge>
                        <text class="status-label">待付款</text>
                    </navigator>
                    <navigator hover-class="none" url=" ">
                        <uni-badge :text="userInfo.orderInfo.shippedNumber" :offset="[3, 3]" absolute="rightTop">
                            <image src="/static/images/order-status-4.png" class="status-icon" />
                        </uni-badge>
                        <text class="status-label">待付款</text>
                    </navigator>
                </view>
            </custom-section>
            <!-- 快捷工具标题 -->
            <custom-section title="快捷工具">
                <!-- 默认插槽位置 列表-->
                <uni-list :border="false">
                    <uni-list-item :border="false" title="我的问诊" show-arrow show-extra-icon :extra-icon="{
                        type: 'icon-symbol-tool-01',
                    }" />
                    <uni-list-item :border="false" title="我的处方" show-arrow show-extra-icon :extra-icon="{
                        type: 'icon-symbol-tool-02',
                    }" />
                    <!-- <navigator url="/subpkg_archive/form/form"> -->
                    <!-- to="/subpkg_archive/form/form" 可以实现跳转-->
                    <uni-list-item :border="false" title="家庭档案" show-arrow show-extra-icon :extra-icon="{
                        type: 'icon-symbol-tool-03',
                    }" to="/subpkg_archive/list/list" clickable="true" />
                    <!-- </navigator> -->

                    <uni-list-item :border="false" title="地址管理" show-arrow show-extra-icon :extra-icon="{
                        type: 'icon-symbol-tool-04',
                    }" />
                    <uni-list-item :border="false" title="我的评价" show-arrow show-extra-icon :extra-icon="{
                        type: 'icon-symbol-tool-05',
                    }" />
                    <uni-list-item :border="false" title="官方客服" show-arrow show-extra-icon :extra-icon="{
                        type: 'icon-symbol-tool-06',
                    }" />
                    <uni-list-item :border="false" title="设置" show-arrow show-extra-icon :extra-icon="{
                        type: 'icon-symbol-tool-07',
                    }" />
                </uni-list>
            </custom-section>
            <!-- 退出登录 -->
            <view class="logout-button" @click="loginOut">退出登录</view>
        </view>
    </scroll-view>
</template>

<style lang="scss">
@import './index.scss';
</style>
